{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>
  
  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  img {
    width: 100%;
  }

  .order-title {
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    margin-top: -5px;
    margin-bottom: 0;
  }

  .order-input {
    width: 100%;
    height: 35px;
    margin-top: 10px;
    padding-left: 10px;
    text-align: center;
    background: transparent;
    border: 1px solid #FFFFFF;
  }

  .order-submit {
    width: 100%;
    height: 35px;
    background: #C8582E;;
    color: #ffffff;
    border: none;
    padding: 0 2px;
    margin-top: 15px;
  }

  .order-submit:active {
    opacity: .8;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide > a > img {
    width: 100%;
  }

  .swiper-slide > img {
    width: 100%;
  }

  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -2px !important;
  }

  .swiper-pagination .swiper-pagination-bullet {
    background: rgba(10, 10, 10, .2);
    opacity: 1.0;
  }

  .swiper-pagination .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }

  .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 3px;
  }

</style>
{/block}
{block name="main"}
<section>
  <img src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_01.jpg" alt="">

  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_02.jpg" style="width: 100%; margin-top: -10px" alt="">

  <div class="d-flex flex-column" style="background: url('https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/eg_bg.png'); background-size: cover; padding-bottom: 0px">
    <div style="color: #404040; text-align: center; font-size: 14px; line-height: 30px; margin: 20px 0">
      每一种情绪都定义着一个颜色<br/>
      它藏着你的喜欢<br/>
      左右着你的穿着、你的家园<br/>
      甚至是你爱去的咖啡馆
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/case/eg1.png">
        </div>
        <div class="swiper-slide">
          <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/case/eg3.png">
        </div>
        <div class="swiper-slide">
          <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/case/eg4.png">
        </div>
        <div class="swiper-slide">
          <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/case/eg5.png">
        </div>
        <div class="swiper-slide">
          <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/case/eg6.png">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_03.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_04.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_05.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_06.jpg" style="width: 100%; margin-top: -10px" alt="">

  <div id="act-baoming" class="d-flex align-items-center justify-content-center" style="position: relative;background: url('https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/bm_bg.png'); background-repeat: no-repeat; background-size: contain; padding: 70px 0 40px">
    <div class="wow animate__animated animate__fadeInUp">
      <div class="mx-auto" style="background: rgba(255, 255, 255, .2);display: flex; flex-direction: column; align-items: center; padding: 10px 10px 20px; margin: 0 auto;width: 70vw">
        <div style="display: flex; flex-direction: column; margin-top: .1rem; width: 90%">
          <input class="order-input" id="act-customer" placeholder="您的称呼"/>
          <input class="order-input" id="act-mobile" placeholder="您的联系方式"/>
          <button class="order-submit">立即预约报名</button>
        </div>
      </div>
    </div>
  </div>

  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_07.jpg" style="width: 100%; margin-top: -20px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_08.jpg" style="width: 100%; margin-top: 0px;" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_09.jpg" style="width: 100%; margin-top: -10px;" alt="">
  <img onclick="document.getElementById('act-baoming').scrollIntoView();" class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/h5/zm_yd_10.jpg" style="width: 100%; margin-top: -10px;" alt="">
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>
  $.toast.prototype.defaults.duration = 1000;

  const swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    } ,
    autoplay: {
      delay: 4000,
      stopOnLastSlide: false,
      disableOnInteraction: true,
    },
    paginationElement : 'li',
    paginationClickable: true,
    loop: true,
    autoplayDisableOnInteraction: false
  });

  $('.order-submit').on('click', function () {
    const mobile = $('#act-mobile').val();
    const mobileStatus = validMobile(mobile);
    switch (mobileStatus) {
      case 1:
        $.showLoading("预约中");

        const data = { mobile, customer: $('#act-customer').val(), building: $('#act-building').val() };

        doAppointment(data,
          function(res) {
            $.hideLoading();
            $.toast("预约成功");
            $('#act-customer').val('');
            $('#act-mobile').val('');
            $('#act-building').val('');
            console.log('onAppointmentSuccess', res);
            const { data = '' } = res;
            if(data) {
              buryingPoint('APPOINTMENT', data);
            }
          }, function(err) {
            console.log('onAppointmentError', err);
            $.hideLoading();
            $.toast(err, "text");
          });

        break;
      case 2:
        $.toast("手机号码格式不正确", "forbidden");
        break;
      case 3:
        $.toast("请输入手机号码", "forbidden");
        break;
    }
  });
</script>
{/block}